// H2 组件
class Myh2 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      date: props.date.toLocaleTimeString(),
    };
  }

  render() {
    return (
      <h2 onClick={this.props.onClick}>
        {this.props.date.toLocaleTimeString()}
      </h2>
    );
  }
}

// 计时器 组件
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerId = setInterval(() => {
      this.setState({
        date: new Date(),
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  handlerClick() {
    console.log(this.state.date);
  }

  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <Myh2 date={this.state.date} onClick={this.handlerClick.bind(this)} />
      </div>
    );
  }
}

// 待办列表 组件
class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const todoItem = this.props.todoList.map((item, index) => {
      const statusSpan = item.status.map((status, index) => {
        return (
          <span
            key = {index}
            style={{
              backgroundColor: "#ccc",
              fontSize: "12px",
              borderRadius: "5px",
            }}
          >
            {status}
          </span>
        );
      });

      return (
        <li key={index.toString()}>
          {`${index + 1}. ${item.value}`}
          {statusSpan}
          <button data-index={index} onClick={this.props.onDel}>
            删除
          </button>
        </li>
      );
    });

    return <ul>{todoItem}</ul>;
  }
}

// 添加待办表单 组件
class AddTodoForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoValue: "",
      todoStatus: ["关注"],
      todoList: [],
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);

    this.handlerSelectChange = this.handlerSelectChange.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();

    const todoList = this.state.todoList.concat({
      value: this.state.todoValue,
      status: this.state.todoStatus,
    });

    this.setState({
      todoList,
      todoValue: "",
    });
  }

  handleChange(e) {
    this.setState({
      todoValue: e.target.value,
    });
  }

  handleDelete(e) {
    let todoList = this.state.todoList;
    todoList.splice(e.target.dataset.index, 1);

    this.setState({
      todoList,
    });
  }

  handlerSelectChange(e) {
    this.state.todoStatus.push(e.target.value)
    this.setState({
      todoStatus: this.state.todoStatus,
    });
  }

  render() {
    return (
      <div>
        <TodoList todoList={this.state.todoList} onDel={this.handleDelete} />

        <form onSubmit={this.handleSubmit}>
          <label>
            标签:
            <select
              multiple={true}
              value={this.state.todoStatus}
              onChange={this.handlerSelectChange}
            >
              <option value="普通">普通</option>
              <option value="关注">关注</option>
              <option value="紧急">紧急</option>
            </select>
          </label>
          <label>
            待办:
            <input
              type="text"
              value={this.state.todoValue}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="添加" />
        </form>
      </div>
    );
  }
}
